<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<link rel="stylesheet" type="text/css" href="<c:url value="/resources/styles/jquery-ui.css"/>" />
		<link rel="stylesheet" href="<c:url value="/resources/styles/springsource.css"/>" type="text/css"/>		
		
		<script type="text/javascript" src="<c:url value="resources/js/jquery-1.6.4.js"/>"></script>		
		<script type="text/javascript" src="<c:url value="resources/js/jquery-ui.js"/>"></script>
		<title>Account Search</title>
	 	<script type="text/javascript"> 
				
	$(document).ready(function() {						
		$( "#name").autocomplete({ 
								    source: function (request, response) { 
											$.getJSON("${pageContext.request.contextPath}/getAccountHolderNames", 
												        {term: request.term},
        									 			 response);
								    },													  

									search: function(event, ui) {         
										$('.spinnerName').show();    
									},    
									
									open: function(event, ui) {        
										$('.spinnerName').hide();    
									}
								 }
		);
						
						

		$( "#contactNumber").autocomplete( {  
									source: function (request, response) { 
											$.getJSON("${pageContext.request.contextPath}/getAccountHolderNumbers", 
												        {term: request.term},
	       									 			 response);
									},									  					
									search: function(event, ui) {         
										$('.spinnerNumber').show();    
									},    
									
									open: function(event, ui) {        
										$('.spinnerNumber').hide();    
									}
		
		});
						
						
	});
	</script> 
	</head>	
	<body>
	

	
	
		<div id="main_wrapper">		
			<h2><spring:message code="account.search.title"/> </h2>			
			<form:form id="accountSearchForm" name="accountSearchForm" commandName="accountCriteria">
				<table style="width:70%;border:1px">
					<tr>
						<td><spring:message code="customer.name"/></td>
						<td><div id="spinnerName" class="spinnerName">  
     							<img id="img-spinner" src="<c:url value="resources/images/ajax-loader.gif"/>" alt="Loading"/>  
 							</div>
 						</td>	 
 						<td>							
							<form:input path="name" cssStyle="autocompleteData"/></td>
					</tr>
					<tr>
						<td><spring:message code="contact.number"/></td>
						<td><div id="spinnerNumber" class="spinnerNumber">  
     							<img id="img-spinner" src="<c:url value="resources/images/ajax-loader.gif"/>" alt="Loading"/>  
 							</div>
 						</td>
						<td><form:input path="contactNumber"/></td>
					</tr>
					
					<tr>
						<td colspan='2'><input name="_eventId_search" type="submit" value="<spring:message code="search.label"/>"/>
						</td>
					</tr>
				</table>
			</form:form>		
		</div>
	</body>
</html>
